<template>
  <view class="form">
    <view class="kaipiao-info"><b>开票详情</b></view>
    <view class="tail-page">
      <uni-forms class="forms" ref="form" :model="form" labelWidth="100px">
        <view class="header">
          <uni-forms-item label="抬头类型" name="type" style="width: 400px;height: 20px;margin-left: 5px">
            <uni-data-checkbox v-model="form.type" :localdata="types"/>
          </uni-forms-item>
        </view>
        <view class="header">
          <uni-forms-item label="发票抬头" name="title"
                          style="width: 350px;height: 18px;margin-left: 5px;margin-top: 8px">
            <input style="border: none;outline: none;box-shadow: none;" v-model="form.title"
                   placeholder="请填写发票抬头(必填)"/>
          </uni-forms-item>
        </view>
        <view class="header">
          <uni-forms-item label="税号" name="code" style="width: 350px;height: 18px;margin-left: 5px;margin-top: 8px">
            <input style="border: none;outline: none;box-shadow: none;" v-model="form.code"
                   placeholder="填写纳税人识别号(必填)"/>
          </uni-forms-item>
        </view>
        <view class="header">
          <uni-forms-item label="发票内容" name="content"
                          style="width: 350px;height: 18px;margin-left: 5px;margin-top: 8px">
            <input style="border: none;outline: none;box-shadow: none;height: 28px" v-model="form.content"
                   placeholder="请输入"/>
          </uni-forms-item>
        </view>
        <uni-forms-item label="发票金额" name="content"
                        style="width: 350px;height: 18px;margin-left: 5px;margin-top: 15px">
          <view class="all-num">
            {{ allPriceNum }}<small>元</small>
          </view>
        </uni-forms-item>
        <view class="annotation">
          {{ annotation }}
        </view>

      </uni-forms>
    </view>
    <view class="form-two">
      <view class="fone-fangshi">
        <b>接收方式</b>
      </view>
      <view class="form-three">
        <uni-forms class="forms" ref="form" :model="form" labelWidth="100px">
          <uni-forms-item label="邮箱地址" name="email" style="margin-left: 20px;margin-top: 8px">
            <input style="border: none;outline: none;box-shadow: none" v-model="form.email"
                   placeholder="请输入邮箱"/>
          </uni-forms-item>
        </uni-forms>
      </view>

    </view>
    <view class="container">
      <button class="button" @click="submit"><span style="color: white">提交电子发票</span></button>

    </view>
  </view>
</template>
<script>

import {saveMassage} from '@/api/invoice'

export default {
  data() {
    return {
      annotation: '注：此金额不包括停车费，高速费等，附加费不可开票',
      id: "",
      allPriceNum: 0,
      orderInfo: {},
      form: {
        id: "",
        startTime: "",
        orderId: "",
        firmName: "",
        firmCode: "",
        phone: "",
        userId: "",
        type: "",
        title: "",
        code: "",
        content: "",
        allPrice: "",
        email: "",
      },
      types: [{
        text: '公司单位',
        value: "1"
      }, {
        text: '个人',
        value: "2"
      }],
      rules: {
        title: [
          {required: true, errorMessage: '发票内容不能为空'}
        ],
        email: [
          {
            required: true,
            errorMessage: '邮箱地址不能为空'
          }
        ]
      }
    };
  }
  ,
  onLoad: function (res) {
    res.id.toString();
    this.id = res.id.replace(/[\[\]]/g, '')
    this.allPriceNum = res.allPriceNum.replace(/\"/g, "");
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  }
  ,
  methods: {

    // 需要提交和重置功能可以通过ref调用如下方法，或自行修改
    submit() {
      this.form.orderId = this.id
      this.form.allPrice = this.allPriceNum
      console.log(this.form)
      saveMassage(this.form).then(response => {
        if (response.code === 0 || response.code === 200) {
          this.$modal.msgSuccess("保存成功");
          this.$tab.navigateTo('/pages/mine/invoice/log/index')
        } else {
          this.$modal.msgError("未知错误")
        }
      })
    },
  }
}
</script>

<style>
.form {
  width: 100%;
  height: 500px;
  margin-top: 30px;


  .kaipiao-info {
    background-color: #F1F1F1;
    width: 100%;
    height: 25px;
    font-size: 15px;
    margin-left: 20px;
  }

  .tail-page {
    display: flex;
    width: 100%;
    height: 300px;
    border-radius: 30px;
    background-color: #FFFFFF;
    padding: 15px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12 rpx;
      border-bottom: 1px solid #e5e5e5;
    }

    .all-num {
      font-size: 30px;
      float: right;
    }

    .annotation {
      color: red;
      margin-left: 5px;
    }

    .radio-label {
      display: block;
      margin-bottom: 5px;
    }

    .button {
      display: flex;
      align-items: center;
      height: 35px;
      line-height: 35px;
      margin-left: 10px;
    }
  }

  .form-two {
    width: 100%;
    height: 80px;

    margin-top: 20px;

    .fone-fangshi {
      background-color: #F1F1F1;
      font-size: 15px;
      margin-left: 20px;
    }

    .form-three {
      width: 100%;
      height: 40px;
      background-color: #FFFFFF;
      border-radius: 15px;

    }
  }

  .container {
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
  }

  .button {
    width: 100%;
    border-radius: 40px;
    background-color: #25A690;
  }
}


</style>
